<!--
 * @Author: 肖世渊 xiao2655308229@163.com
 * @Date: 2025-09-10 10:44:37
 * @LastEditors: 肖世渊 xiao2655308229@163.com
 * @LastEditTime: 2025-09-19 14:50:07
 * @FilePath: \23信算\city\src\pages\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <!-- 头部开始 -->
        <div class="header">
            {{ title }}
        </div>
        <!-- 头部结束 -->
        <!-- 体部开始 -->
        <div class="content">
            <div class="top">
                <div class="left">
                    <div class="chart">
                        <Left1></Left1>
                    </div>
                    <div class="chart">
                        <Left2></Left2>
                    </div>
                </div>
                <div class="center">
                    <Map></Map>
                </div>
                <div class="right">
                    <div class="chart">
                        <Right1></Right1></div>
                    <div class="chart">
                        <Right2></Right2>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="chart">
                    <Bottom1></Bottom1>
                </div>
                <div class="chart">
                    <Bottom2></Bottom2>
                </div>
                <div class="chart">
                    <Bottom3></Bottom3>
                </div>
                <div class="chart">
                    <Bottom4></Bottom4>
                </div>
            </div>
        </div>
        <!-- 体部结束 -->

    </div>
</template>
<script>
// 引入组件
import Left1 from './components/Left1.vue';
import Left2 from './components/Left2.vue';
import Right1 from './components/Right1.vue';
import Right2 from './components/Right2.vue';
import Bottom1 from './components/Bottom1.vue';
import Bottom2 from './components/Bottom2.vue';
import Bottom3 from './components/Bottom3.vue';
import Bottom4 from './components/Bottom4.vue';
import Map from './components/Map.vue';


export default {
    // 局部注册组件
    components:{
        Left1,
        Left2,
        Right1,
        Right2,
        Bottom1,
        Bottom2,
        Bottom3,
        Bottom4,
        Map,
    },
    data(){
        return{
            title:'乌托邦大气环境检测平台'
        }
    }
}
</script>
<style lang="less" scoped>
    // 头部样式开始
    .header{
        height: 60px;
        background-image: url(../assets/layout/header.png);
        background-size: 100% 200px;
        text-align: center;
        line-height: 45px;
        color: white;
        font-size: 28px;
        font-family: "楷体";
    }
    // 头部样式结束
    // 体部样式开始
    .content{
        height: calc(100vh - 60px);
        // 给父元素开启伸缩盒
        display: flex;
        flex-direction: column;
        .top{
            flex: 2;
            display: flex;
            // 组合选择器 选择器1，选择器2，选择器3...
            .left,.right{
                flex: 1;
                display: flex;
                flex-direction: column;
                &>div{
                    flex: 1;
                }
            }
            .center{
                flex: 2;
                background-image: url(../assets/layout/chart_center_box_bg.png);
                background-size: 100% 100%;
                margin: 0px 5px 10px 5px;

            }
        }
        .bottom{
            flex: 1;
            display: flex;
            &>div{
                flex: 1;
            }
        }
        .chart{
            background-image: url(../assets/layout/chart_box_bg.png);
            background-size: 100% 100%;
            margin: 0px 5px 10px 5px;
            padding: 10px;
            box-sizing: border-box;
            color: white;
        }
    }
    // 体部样式结束
</style>